<template>
  <div>
    <!--数据表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="180" prop="id"></el-table-column>
      <el-table-column
        label="登陆名"
        width="200"
        prop="loginName"
      ></el-table-column>
      <el-table-column label="IP" width="180" prop="ip"></el-table-column>
      <el-table-column
        label="浏览器类型"
        width="100"
        prop="goodsNum"
      ></el-table-column>
      <el-table-column label="地区" width="150" prop="location">
      </el-table-column>
      <el-table-column label="登陆时间" width="180" prop="loginTime">
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 呈现数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 页大小
      pageSize: 5,
      // 页大小列表
      pageSizeList: [5, 10, 20, 50],
      // 总记录数
      total: 0,
      // 查询表单对象
      searchMap: { parentId: 0 }
    };
  },
  methods: {
    // 查询分页
    async getCategoryList() {
      const { data: res } = await this.$http.get(
        `vi/system/login/log/listPages/${this.currentPage}/${this.pageSize}`
      );
      this.tableData = res.data.pageUtils.rows;
      this.total = res.data.pageUtils.total;
    },
    // 页大小改变
    async handleSizeChange(val) {
      this.pageSize = val;
      this.getCategoryList();
    },
    // 页码改变
    async handleCurrentChange(val) {
      this.currentPage = val;
      this.getCategoryList();
    }
  },
  async created() {
    this.getCategoryList();
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
